<script setup>
import { onMounted, ref } from 'vue'
import Util from '@/utils/util.js'
import { getChapters, getChapterContent } from '@/api/api.js'
let navTitle = ref('返回');
let initLoading = ref(true);
let showReaderNav = ref(true);
let showfontContainer = ref(false);
let chapterInfo = ref({ title: '', content: [] });
let rootContainer = ref({style: {}});
let fictionContainer = ref({});
let bottomToolBar = ref({ show: true, color: '#000000' });
//字体和背景的颜色表
const colorArr = ref([{
    value: '#f7eee5',
    name: '米白',
    font: ''
}, {
    value: '#e9dfc7',
    name: '纸张',
    font: '',
}, {
    value: '#a4a4a4',
    name: '浅灰',
    font: ''
}, {
    value: '#cdefce',
    name: '护眼',
    font: ''
}, {
    value: '#283548',
    name: '灰蓝',
    font: '#7685a2',
    bottomcolor: '#fff'
}, {
    value: '#0f1410',
    name: '夜间',
    font: '#4e534f',
    bottomcolor: 'rgba(255,255,255,0.7)',
}]);

let Title = "";
// 上一级获取小说ID，章节ID
let Fiction_id = 13359;
let Chapter_id;
//是否是夜间模式
let NightMode = ref(false);
//初始化的字体大小
let InitFontSize;

if (Util.StorageGetter(Fiction_id + 'last_chapter')) {
    Chapter_id = Util.StorageGetter(Fiction_id + 'last_chapter');
}

if (!Chapter_id) {
    Chapter_id = 1;
}
let Chapters = [];

// 读取章节
getChapters().then((data) => {
    if (data.result == 0) {
        Title = data.title;
        navTitle = '返回书架';
        window.ChaptersData = data.chapters;
        window.chapter_data = data.chapters;
        for (var i = 0; i < data.chapters.length; i++) {
            Chapters.push({
                "chapter_id": data.chapters[i].chapter_id,
                "title": data.chapters[i].title
            })
        }
        gotoChapter(Chapter_id);
    } else {
        console.log(data);
    }
})
    .catch((err) => {
        console.log(err);
    });

const gotoChapter = (chapter_id) => {
    Chapter_id = chapter_id;
    getCurChapterContent();
};
//获得当前章节内容
function getCurChapterContent() {
    getChapterContent(Chapter_id).then(function (data) {
        if (data.result == 0) {
            var url = data.jsonp;
            Util.getBSONP(url, function (data) {
                initLoading = false;
                RenderBaseFrame(data);
            });
        } else {
            console.log(data);
        }
    })
        .catch((err) => {
            console.log(err);
        });
};


//章节内容转换,并渲染
function RenderBaseFrame(jsonData) {
    // 内容转换 parseChapterContentData
    var jsonObj = JSON.parse(jsonData);
    chapterInfo.value = { title: jsonObj.t, content: jsonObj.p };
    // readerUIFrame
    bottomToolBar.value.show = true;
    setTimeout(function () {
        // ScrollLock = false;
        rootContainer.value.scrollTop = 0;
        document.body.scrollTop = 0;
    }, 20);
}
//章节翻页
//获得上一章内容
const prevChapterHandler = () => {
    Chapter_id = parseInt(Chapter_id);
    if (Chapter_id <= 0) {
        return
    }
    var cid = Chapter_id - 1;
    gotoChapter(cid);
    Util.StorageSetter(Fiction_id + 'last_chapter', Chapter_id);
};

//获得下一章内容
const nextChapterHandler = () => {
    Chapter_id = parseInt(Chapter_id);
    if (Chapter_id == Chapters.length - 1) {
        return
    }
    var cid = Chapter_id + 1;
    gotoChapter(cid);
    Util.StorageSetter(Fiction_id + 'last_chapter', Chapter_id);
};

//屏幕中央事件
const actionMidHandler = () => {
    // 上下nav的显示隐藏
    showReaderNav.value = !showReaderNav.value
    showfontContainer.value = false
};
//从缓存中读取的信息进行展示
const ModuleFontSwitch = () => {
    let tool_bar = Util.StorageGetter('toolbar_background_color');
    let bottomcolor = Util.StorageGetter('bottom_color');
    let color = Util.StorageGetter('background_color');
    let font = Util.StorageGetter('font_color');
    let bkCurColor = Util.StorageGetter('background_color');
    let fontColor = Util.StorageGetter('font_color');
    for (let i = 0; i < colorArr.value.length; i++) {
        let display = 'none';
        if (bkCurColor == colorArr.value[i].value) {
            display = '';
        }
        colorArr.value[i].display = display;
    }

    fictionContainer.value.minHeight = window.innerHeight - 100;

    if (bottomcolor) {
        bottomToolBar.value.color = bottomcolor;
    }

    if (color) {
        rootContainer.value.style['background-color'] = color;
    }

    if (font) {
        fictionContainer.value.color = font;
    }

    //夜间模式
    if (fontColor == '#4e534f') {
        NightMode.value = true;
    }

    //字体设置信息
    InitFontSize = Util.StorageGetter('font_size');
    InitFontSize = parseInt(InitFontSize);
    if (!InitFontSize) {
        InitFontSize = 18;
    }

    fictionContainer.value.fontSize = InitFontSize;
}
//页面中的零散交互事件处理
const EventHandler = {
    //夜间和白天模式的转化
    changeNightHandler: () => {
        showfontContainer.value = false;
        if (NightMode.value) {
            // 切换到白天-纸张模式
            EventHandler.changeReaderTheme({
                color: '#e9dfc7',
                name: '纸张',
                font: '',
            });
            NightMode.value = false;
        } else {
            // 切换到夜间模式
            EventHandler.changeReaderTheme({
                color: '#0f1410', font: '#4e534f', bottomcolor: 'rgba(255,255,255,0.7)'
            });
            NightMode.value = true;
        }
    },

    //字体和背景颜色的信息设置
    bkContainerHandler: (e) => {
        const data = e.target.dataset;
        EventHandler.changeReaderTheme(data);
    },
    changeReaderTheme: (data) => {
        let color = data.color; // background-color
        let bottomcolor = data.bottomcolor; // bottom_color
        let font = data.font; // font_color
        let tool_bar = font;
        if (!font) {
            font = '#000';
        }
        if (!tool_bar) {
            tool_bar = '#fbfcfc';
        }
        // 上下章节按钮颜色
        bottomToolBar.value.color = bottomcolor && bottomcolor != "undefined" ? bottomcolor : '#a9a9a9';
        // 当前背景色加边框
        colorArr.value.forEach((item) => {
            item.display = item.value == color ? '' : 'none';
        });
        rootContainer.value.style['background-color'] = color;
        fictionContainer.value.color = font;

        Util.StorageSetter('toolbar_background_color', tool_bar);
        Util.StorageSetter('bottom_color', bottomcolor);
        Util.StorageSetter('background_color', color);
        Util.StorageSetter('font_color', font);

        //夜间模式
        NightMode.value = (font == '#4e534f');
    },

    //按钮的多态样式效果
    // $('.spe-button').on('touchstart', function() {
    // 	$(this).css('background', 'rgba(255,255,255,0.3)');
    // }).on('touchmove', function() {
    // 	$(this).css('background', 'none');
    // }).on('touchend', function() {
    // 	$(this).css('background', 'none');
    // });

    //字体放大
    largeFontHandler: () => {
        // $('#large-font').click(function() {
        if (InitFontSize > 20) {
            return;
        }
        InitFontSize += 1;
        Util.StorageSetter('font_size', InitFontSize);
        fictionContainer.value.fontSize = InitFontSize;
    },

    //字体缩小
    smallFontHandler: () => {
        // $('#small-font').click(function() {
        if (InitFontSize < 12) {
            return;
        }
        InitFontSize -= 1;
        Util.StorageSetter('font_size', InitFontSize);
        fictionContainer.value.fontSize = InitFontSize;
    },


    //对屏幕的滚动监控
    // Win.scroll(function() {
    // 	Dom.top_nav.hide();
    // 	Dom.bottom_nav.hide();
    // 	font_container.hide();
    // 	font_button.removeClass('current');
    // });


    //返回上级页面
    backButtonHandler: () => {
        if (Fiction_id) {
            location.href = '/book/' + Fiction_id;
        }
    },
    menu_buttonHandler: () => {
        // $('#menu_button').click(function() {
        location.href = 'http://dushu.xiaomi.com/fiction/chapter/306450';
    },
}
onMounted(ModuleFontSwitch)
</script>

<template>
    <van-overlay :show="initLoading" @click="initLoading = false">
        <div class="wrapper" @click.stop>
            <van-loading />
        </div>
    </van-overlay>
    <div class="container" id="root" :style="rootContainer.style">
        <div id="fiction_chapter_title"></div>
        <div class="m-artical-action">
            <div class="artical-action-mid" @click="actionMidHandler"></div>
        </div>
        <div id="fiction_container" class="m-read-content"
            :style="{ 'font-size': fictionContainer.fontSize + 'px', 'min-height': fictionContainer.minHeight, 'background-color': fictionContainer.backColor, 'color': fictionContainer.color }">
            <h4>{{ chapterInfo.title }}</h4>
            <p v-for="(item, i) in chapterInfo.content" :key="i">{{ item }}</p>
        </div>
        <div class="top-nav" v-show="showReaderNav">
            <div class="top-nav-warp">
                <div class="icon-back"></div>
                <div class="nav-title" id="nav_title">
                    {{ navTitle }}
                </div>
            </div>
        </div>
        <div class="top-nav-pannel-bk font-container" id="font-container" v-show="showfontContainer"></div>
        <div class="top-nav-pannel font-container" id="font-container" v-show="showfontContainer">
            <div class="child-mod">
                <span>字号</span>
                <button id="large-font" class="spe-button" @click="EventHandler.largeFontHandler">
                    大
                </button>
                <button id="small-font" class="spe-button" style="margin-left:10px;" @click="EventHandler.smallFontHandler">
                    小
                </button>
            </div>
            <div class="child-mod" id="bk-container">
                <span>背景</span>
                <div @click="EventHandler.bkContainerHandler" class="bk-container" v-for="(item, i) in colorArr" :key="i"
                    :data-font="item.font" :data-bottomcolor="item.bottomcolor" :data-color="item.value"
                    :style="{ 'background-color': item.value }">
                    <div class="bk-container-current" :style="{ 'display': item.display }"></div>
                    <span style="display:none"> {{ item.name }}</span>
                </div>
            </div>
        </div>
        <div class="m-button-bar" id="bottom_tool_bar" v-show="bottomToolBar.show"
            style="display:none;padding-bottom:70px;">
            <van-button hairline :color="bottomToolBar.color" @click="prevChapterHandler">上一章</van-button>
            <van-button hairline :color="bottomToolBar.color" @click="nextChapterHandler">下一章</van-button>
        </div>

        <div class="bottom-nav-bk bottom_nav" v-show="showReaderNav"></div>
        <div class="bottom-nav bottom_nav" v-show="showReaderNav">
            <div class="item menu-button" id="menu_button">
                <div class="item-warp">
                    <div class="icon-menu"></div>
                    <div class="icon-text">
                        目录
                    </div>
                </div>
            </div>
            <div class="item" :class="showfontContainer ? 'current' : ''" @click="showfontContainer = !showfontContainer">
                <div class="item-warp">
                    <div class="icon-ft"></div>
                    <div class="icon-text">
                        字体
                    </div>
                </div>
            </div>
            <div class="item" id="night-button" @click="EventHandler.changeNightHandler">
                <div class="item-warp" v-show="NightMode" id="day_icon">
                    <div class="icon-day"></div>
                    <div class="icon-text">
                        白天
                    </div>
                </div>
                <div class="item-warp" v-show="!NightMode" id="night_icon">
                    <div class="icon-night"></div>
                    <div class="icon-text">
                        夜间
                    </div>
                </div>
            </div>
        </div>

        <div class="loading" id="loading" style="display:none">
            正在加载中...
        </div>
        <div class="m-tool-bar-mask" id="tool_bar_mask" style="display:none"></div>
        <ul class="menu-container chapter-list" id="menu_container" style="display:none"></ul>
        <div class="menu-mask" id="menu_mask" style="display:none"></div>
        <div class="mask" id="mask" style="display:none"></div>
    </div>
</template>

<style scoped>
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    text-align: left;
    width: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .05);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    background: #e9dfc7;
    overflow: hidden;
}

.m-read-content {
    font-size: 14px;
    color: #555;
    line-height: 31px;
    padding: 15px;
}

.m-read-content h4 {
    font-size: 20px;
    color: #736357;
    border-bottom: solid 1px #736357;
    margin: 0 0 1em 0;
    letter-spacing: 2px;
}

.m-read-content p {
    text-indent: 2em;
    margin: 0.5em 0;
    text-align: justify;
    letter-spacing: 0px;
    line-height: 24px;
}

.artical-action-top {
    position: fixed;
    top: 0px;
    height: 30%;
    width: 100%;
    z-index: 90;
}

.artical-action-mid {
    position: fixed;
    top: 30%;
    height: 40%;
    width: 100%;
    z-index: 10002;
}

.artical-action-bottom {
    position: fixed;
    bottom: 0px;
    height: 30%;
    width: 100%;
    z-index: 90;
}

.m-tool-bar {
    text-align: center;
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0px;
    z-index: 10000;
}

.m-tool-bar-mask {
    text-align: center;
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0px;
    z-index: 9999;
    background: #000;
    opacity: .9;
}

.menu-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    background: #000;
    opacity: .8;
    top: 0px
}

.m-tool-button {
    padding: 5px 15px;
    margin-top: 7px;
    border: 1px #fff solid;
    background: transparent;
    color: #fff
}

.top-nav {
    position: fixed;
    top: 0px;
    height: 50px;
    background: #000;
    width: 100%;
    opacity: 1;
    z-index: 10004
}

.top-nav-warp {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.top-nav-pannel-bk {
    position: fixed;
    bottom: 70px;
    height: 135px;
    background: #000;
    width: 100%;
    color: #fff;
    opacity: 0.9;
    z-index: 10003
}

.top-nav-pannel {
    position: fixed;
    bottom: 70px;
    height: 135px;
    background: none;
    width: 100%;
    color: #fff;
    z-index: 10004
}

.top-nav-pannel button {
    background: none;
    border: 1px #8c8c8c solid;
    padding: 5px 40px;
    color: #fff;
    display: inline-block;
    border-radius: 16px;
}

.top-nav-pannel .bk-container {
    position: relative;
    height: 30px;
    width: 30px;
    background: #fff;
    border-radius: 15px;
    display: inline-block;
    vertical-align: -14px;
    margin-left: 10px;
}

.top-nav-pannel .bk-container-current {
    position: absolute;
    height: 32px;
    width: 32px;
    border-radius: 16px;
    display: inline-block;
    vertical-align: -14px;
    margin-left: 10px;
    border: 1px #ff7800 solid;
    top: -2px;
    left: -12px;
}

.top-nav-pannel .bk-container span {
    position: absolute;
    top: 32px;
    left: -8px;
    display: block;
    font-size: 12px;
    width: 40px;
}

.bottom-nav-bk {
    position: fixed;
    bottom: 0px;
    height: 70px;
    background: #000;
    width: 100%;
    opacity: .9;
    z-index: 10004
}

.bottom-nav {
    position: fixed;
    bottom: 0px;
    height: 70px;
    background: none;
    width: 100%;
    opacity: 1;
    z-index: 10004;
    margin: 0 auto;
    text-align: center
}

.bottom-nav .item {
    display: inline-block;
    width: 32%;
    color: #fff;
    text-align: center;
    margin: 0 auto;
}

.m-button-bar {
    text-align: center;
    font-size: 14px;
    padding: 5px;
    margin: 10px;
    max-width: 900px;
    margin: 0 auto;
    width: 70%
}

.m-button-bar button {
    background: none;
    border: 1px #000 solid;
    padding: 5px 10px;
}

.nav-title {
    position: absolute;
    top: 16px;
    left: 42px;
    color: #d5d5d6
}

.top-nav button {
    width: 65px;
    font-size: 12px;
    background: none;
    border: 1px #d5d5d6 solid;
    padding: 5px 10px;
    color: #d5d5d6;
    position: absolute;
    top: 11px;
    border-radius: 16px 0 0 16px;
    opacity: 0.9
}

.child-mod {
    padding: 5px 10px;
    margin-top: 15px
}

.child-mod span {
    display: inline-block;
    padding-right: 20px;
    padding-left: 10px;
}

.large-font p {
    font-size: 18px
}

.small-font p {
    font-size: 14px
}

.menu-container {
    height: 60%;
    position: fixed;
    bottom: 0px;
    width: 100%;
    overflow: scroll;
    background: #fff;
    display: block;
    z-index: 19999
}

.chapter-list {
    text-align: left;
}

.chapter-list li {
    padding: 15px;
}

.chapter-list li:nth-child(2n-1) {
    background-color: #ededed
}

.chapter-list li:nth-child(2n) {
    background-color: #e6e6e6
}

.chapter-list .free {
    float: right;
}

.free {
    color: #459c3a;
}

.loading {
    position: fixed;
    text-align: center;
    width: 100%;
    top: 40%;
    color: #fff;
    z-index: 199999
}

.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 12000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .4;
    background: #000;
}

.buy-mask {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    text-align: center;
    margin: 0 auto;
    display: none;
    z-index: 10001;
    background: #e9dfc7;
}

.icon-back {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 23px;
    height: 23px;
    background: url();
    background-size: contain;
}

.icon-text {
    position: absolute;
    top: 25px;
    font-size: 10px;
}

.icon-menu,
.icon-ft,
.icon-night,
.icon-day {
    position: absolute;
    top: 3px;
    left: 2px;
    width: 18px;
    height: 13px;
    background: url();
    background-size: contain;
}

.icon-night,
.icon-day,
.icon-ft {
    left: 1px;
}

.icon-ft {
    width: 20px;
    height: 13px;
    background: url();
    background-size: contain;
}

.current .icon-ft {
    top: 2px;
    left: 0px;
    width: 22px;
    height: 15px;
    background: url();
    background-size: contain;
}

.icon-day {
    width: 19px;
    height: 18px;
    background: url();
    background-size: contain;
}

.icon-night {
    left: 4px;
    width: 16px;
    height: 16px;
    background: url();
    background-size: contain;
}

.item-warp {
    width: 26px;
    margin: 0 auto;
    position: relative;
}

.buy-container {
    width: 100%;
    position: fixed;
    top: 20%;
    text-align: center;
    margin: 0 auto;
    display: none;
    z-index: 10003
}

.buy-container h3 {
    font-weight: normal;
    line-height: 30px;
    font-family: microsoft yahei, arial, helvetica, sans-serif
}

.buy-container h2 {
    padding-bottom: 80px;
}

.buy-container button {
    font-family: microsoft yahei, arial, helvetica, sans-serif;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    padding: 0 10px;
    width: 160px;
    background: #4a90b1;
    margin-top: 10px;
}

.m-read-content {
    min-height: 300px;
    max-width: 900px;
    margin: 0 auto;
}

.buy-popup-frame {
    display: none;
    position: fixed;
    bottom: 0px;
    ;
    left: 0px;
    width: 100%;
    height: 266px;
    z-index: 39999
}</style>